<template>
  <div>
    <el-form ref="clusterForm" :model="formData" :rules="rules" size="small" label-width="100px"
             label-position="top">
      <el-form-item label="flink版本" prop="flinkVersion" label-width="200px">
        <el-select v-model="formData.flinkVersion" placeholder="请选择flink版本" >
          <el-option
              v-for="item in formData.flinkVersionList"
              :key="item.flinkVersion"
              :label="item.flinkVersion"
              :value="item.flinkVersion">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label-width="200px" label="集群名称" prop="clusterName">
        <el-input v-model="formData.clusterName" placeholder="请输入集群名称" clearable
                  :style="{width: '100%'}"></el-input>
      </el-form-item>
      <el-form-item label-width="200px" label="Hadoop配置路径" prop="hadoopDir">
        <el-input v-model="formData.hadoopDir" placeholder="请输入Hadoop配置路径" clearable
                  :style="{width: '100%'}"></el-input>
      </el-form-item>

      <el-form-item label-width="200px" label="是否开启kerberos权限">
        <el-switch v-model="formData.isKereros"></el-switch>
      </el-form-item>
      <el-form-item label-width="200px" label="kerberos配置文件路径" v-if="formData.isKereros">
        <el-input v-model="formData.kererosDir" placeholder="请输入kerberos配置文件路径" clearable
                  :style="{width: '100%'}"></el-input>
      </el-form-item>

      <el-form-item label-width="200px" label="yarn替换地址" >
        <el-input v-model="formData.mapUrl" placeholder="请输入yarn替换地址" clearable
                  :style="{width: '100%'}"></el-input>
      </el-form-item>



      <el-form-item label-width="200px" label="是否启用" prop="isEnable" required>
        <el-switch v-model="formData.isEnable"></el-switch>
      </el-form-item>
      <el-form-item size="mini">
        <el-button type="primary" @click="testClusterState" :loading="isTestCluster">
          <span v-if="!isTestCluster">测试集群连通性</span>
          <span v-else>正在测试集群连通性</span>
        </el-button>
        <el-button type="primary" @click="submitForm" :loading="isSave">
          <span v-if="!isSave">保存</span>
          <span v-else>正在保存</span>
        </el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>

import {addCluster, testCluster} from "@/api/resource/cluster";

export default {
  name: 'addYarnCluster',
  components: {},
  props: {
    formData: {
      type: Object,
      default: {}
    }

  },
  data() {
    return {
      isTestCluster: false,
      isSave: false,
      rules: {
        clusterName: [{
          required: true,
          message: '请输入集群名称',
          trigger: 'blur'
        }],
        flinkVersion: [
          {required: true, message: '请选择flink版本', trigger: 'blur'}
        ],
        hadoopDir: [{
          required: true,
          message: '请输入Hadoop配置路径',
          trigger: 'blur'
        }],
      },
    }
  },
  computed: {},
  watch: {},
  created() {

  },
  mounted() {

  },
  methods: {

    /**
     * 测试集群状态
     */
    testClusterState() {
      this.$refs['clusterForm'].validate(valid => {
        if (!valid) return
        console.log('ss', this.formData)
        if (this.formData.isKereros) {
          if (this.kererosDir == undefined || this.kererosDir == '') {
            this.$message.warning('开启kerberos后kerberos配置不能为空！');
            return;
          }
        }
        this.isTestCluster = true;
        testCluster(this.formData).then(res => {
          if (res.code === 200) {
            this.$message.success('集群环境正常可以保存！');
          }
          this.isTestCluster = false;
        }).catch(err => {
          this.$message.error('出现异常情况：' + err);
          this.isTestCluster = false;
        })
        // TODO 提交表单
      })
    },


    submitForm() {
      this.$refs['clusterForm'].validate(valid => {
        if (!valid) return
        if (this.formData.isKereros) {
          if (this.kererosDir == undefined || this.kererosDir == '') {
            this.$message.warning('开启kerberos后kerberos配置不能为空！');
            return;
          }
        }
        this.isSave = true;
        addCluster(this.formData).then(res => {
          if (res.code == 200) {
            this.isSave = false;
            this.$message.success('保存成功！')
            this.$emit("handelClusterSaveOk", false)
          }

        }).catch(err => {
          this.isSave = false;
          this.$message.error('保存异常,' + err)
        })


      })
    },
    resetForm: function () {
      this.isSave=false;
      this.isTestCluster = false;
      this.$refs['clusterForm'].resetFields()
    },
  }
}
</script>
<style>
</style>
